<template>
  <div class="workTicketChange flowCloumn h100">
    <div class="constentmain h100">
      <div class="tableContent">
        <list-table-new
          v-bind="tableSetting"
          ref="klTable"
          @selectChange="selectChange"
          @defaultSelection="checkedUser"
          @selectAll="selectAll"
        ></list-table-new>
      </div>
      <div class="annotations list-table-main">
        注：
        <span class="circle normal-bg"></span>
        巡视结果为正常
        <span class="circle warning-bg"></span>
        巡视结果存在异常
      </div>
    </div>
  </div>
</template>
<script>
import { getPatrolOrderList } from "@/api/orderManagement/patrolOrder.js";
export default {
  props: {
    showType: {
      type: String,
      default: "",
    },
    //设备台账当前设备
    currentNode: {
      type: Object,
      default: () => {
        return {};
      },
    },
    planId: {
      type: String,
      default: "",
    },
  },
  watch: {
    currentNode: {
      handler: function(newVal, oldVal) {
        this.currentDevice = Object.assign({}, newVal);
        let queryData = Object.assign(this.tableSetting.searchObj.queryData, {
          // equipmentId: newVal.id,
          // equipmentName: newVal.name,
        });
        this.tableSetting.searchObj.queryData = {};
        this.tableSetting.searchObj.queryData = queryData;
        setTimeout(() => {
          if (oldVal) {
            //不是第一次
            this.updateData();
          }
        }, 0);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      tableSetting: {
        selectionShow: true,
        defaultQueryFirst: true,
        pageConfig: {
          pageCode: "patrolOrder",
          userId: this.$store.getters.userInfo.namePy,
        },
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "input",
              label: "标题",
              model: "title",
              placeholder: "请输入",
            },
            {
              type: "select",
              label: "巡视类别",
              model: "patrolType",
              placeholder: "请选择",
              option: this.$store.getters.dirtData("patrol_way"),
            },
            {
              type: "organization",
              label: "所属单位",
              model: "belongDeptName",
              idsStr: "belongDeptId",
            },
            {
              type: "select",
              label: "工单状态",
              model: "status",
              placeholder: "请输入",
              option: this.$store.getters.dirtData("order_patrol_status"),
            },
            {
              type: "text",
              label: "工单编号",
              model: "code",
              placeholder: "请输入",
            },
            {
              type: "organization",
              label: "巡视单位",
              model: "patrolDeptName",
              idsStr: "patrolDeptId",
            },
            {
              type: "select",
              label: "签到状态",
              model: "arriveStatus",
              placeholder: "请输入",
              option: [
                { label: "已签到", value: 1 },
                { label: "未签到", value: 0 },
              ],
            },
          ],
        },
        //过滤器的值
        filterFormData: {},
        //过滤器的默认值
        defaultFilterData: {},
        userCustomData: [],
        actionList: [
          {
            name: "巡视日历表",
            icon: "el-icon-date",
            content: "未授权功能",
            //disabled: !this.$store.getters.isBtnAuth("export"),
            method: (row) => {
              let { href } = this.$router.resolve({
                name: "patrolOrderCalendar",
                query: {
                },
              });
              window.open(href, "_blank");
            },
          },
          {
            name: "导出",
            icon: "el-icon-download",
            content: "未授权功能",
            //disabled: !this.$store.getters.isBtnAuth("export"),
            method: (row) => {
              this.download();
            },
          },
        ],
        column: [
          {
            label: "工单状态",
            prop: "status",
            sortable: "custom",
            scopeType: "formate",
            width: "120px",
            method: (row) => {
              let str = this.$store.getters.fineDirtDataName(
                "order_patrol_status",
                row.status
              );
              if (row.unusual == 0) {
                return `<span class="normal">${str}</span>`;
              } else {
                return `<span class="warning">${str}</span>`;
              }
            },
          },
          {
            label: "是否超期",
            prop: "overtime",
            sortable: "custom",
            width: "120px",
            formatter: (row) => {
              return row.overtime == 1 ? "是" : "否";
            },
          },
          {
            label: "工单编号",
            width: "180px",
            prop: "code",
            sortable: "custom",
            showTooltip: true,
          },
          {
            label: "标题",
            width: "320px",
            prop: "title",
            sortable: "custom",
            showTooltip: true,
          },
          {
            label: "巡视类别",
            prop: "patrolType",
            minWidth: '110px',
            sortable: "custom",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "patrol_way",
                row.patrolType
              );
            },
          },
          {
            label: "所属单位",
            minWidth: '150px',
            prop: "belongDeptName",
            sortable: "custom",
          },
          {
            label: "巡视单位",
            minWidth: "150px",
            prop: "patrolDeptName",
            sortable: "custom",
          },
          {
            label: "巡视人员",
            minWidth: "150px",
            prop: "patrolDeptName",
            sortable: "custom",
            showTooltip: true,
            formatter: (row) => {
              if (row.userPos) {
                return row.userPos.map((item) => item.workerName).join(",");
              } else {
                return "-";
              }
            },
          },
          {
            label: "巡视进度",
            prop: "stepRate	",
            minWidth: "110px",
            sortable: "custom",
            formatter: (row) => {
              return `${row.usual}/${row.total}`;
            },
          },
          {
            label: "异常点",
            prop: "unusual",
            minWidth: "100px",
            sortable: "custom",
          },
          {
            label: "签到状态进度",
            prop: "arriveStatusStepRate",
            sortable: "custom",
            minWidth: "130px",
            formatter: (row) => {
              return `${row.arriveStatus}/${row.total}`;
            },
          },
          {
            label: "计划开始时间",
            prop: "planStartTime",
            sortable: "custom",
            minWidth: "150px",
            showTooltip: true,
          },
          {
            label: "计划结束时间",
            prop: "planEndTime",
            sortable: "custom",
            minWidth: "150px",
            showTooltip: true,
          },
          {
            label: "实际开始时间",
            prop: "factStartTime",
            sortable: "custom",
            minWidth: "150px",
            showTooltip: true,
          },
          {
            label: "实际结束时间",
            prop: "factEndTime",
            sortable: "custom",
            minWidth: "150px",
            showTooltip: true,
          },
          {
            label: "创建时间",
            prop: "createTime",
            sortable: "custom",
            minWidth: "150px",
            showTooltip: true,
          },
        ],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
        //表格方法
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {
            this.goDetailPage(row, "patrolOrderDetails", "edit");
          },
        },
      },
      checkData: [],
    };
  },
  created() {
    if (this.planId != "") {
      // this.tableSetting.showCustomBtn = false;
      // this.tableSetting.showFilterBtn = false;
      let queryData = Object.assign(this.tableSetting.searchObj.queryData, {
        planId: this.planId,
      });
      this.tableSetting.searchObj.queryData = queryData;
    }
    /* 添加监听事件 */
    window.addEventListener("storage", this.updateData);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    if (this.showType == "query") {
      this.tableSetting.selectionShow = false;
      this.tableSetting.showCustomBtn = false;
      this.tableSetting.showFilterBtn = false;
      this.tableSetting.actionList = [];
    }
    this.$refs.klTable.getTableConfig();
  },
  methods: {
    updateData() {
      this.$refs.klTable.searchData();
    },
    // 获取表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      getPatrolOrderList(queryData).then((res) => {
        this.$set(this.tableSetting, "tableData", res.data.list);
        this.$set(this.tableSetting, "totalNumber", res.data.total);
      });
    },
    //跳转到详情页
    goDetailPage(row, router, type) {
      const { href } = this.$router.resolve({
        name: router,
        query: {
          id: row ? row.id : "",
          pageType: type ? type : "",
        },
      });
      window.open(href, "_blank");
    },
    //勾选已选检修申请单
    checkedUser() {
      this.checkData.forEach((item) => {
        this.tableSetting.tableData.forEach((value) => {
          if (value.id == item) {
            this.$refs.klTable.selectioned(value);
          }
        });
      });
    },
    selectAll(selected) {
      this.tableSetting.tableData.forEach((item) => {
        this.selectChange(selected, item);
      });
    },
    //添加或取消已选工单
    selectChange(selected, row) {
      if (selected) {
        this.checkData.push(row.id);
      } else {
        this.checkData.forEach((item, i) => {
          if (item === row.id) {
            this.checkData.splice(i, 1);
            return;
          }
        });
      }
    },
    //文件下载
    download() {
      let params = {
        ids: this.checkData,
      };
      let path = "eam-service-order/patrol/export";
      let fileName = `巡视工单${this.$utils.getCurrentDate("minutes")}`;
      if (this.checkData.length != 0) {
        this.$utils.downloadFilePost(null, fileName, path, params);
      } else {
        this.$message.warning("请至少勾选一条数据");
        return;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.workTicketChange {
  min-height: 500px;
  text-align:center;
  height: 100%;
  .constentmain {
    position: relative;
    //margin-left: 10px;
  }
  .tableContent {
    min-height: 500px;
    height: 100%;
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
.annotations {
  text-align: left;
  height: 20px;
  line-height: 20px;
  position: absolute;
  bottom: 5px;
}
.circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 10px;
}
</style>
